<template>
    <div class="page-home">
      <div id="sceneBox"></div>
    </div>
  </template>
  <script>
  import { ref, reactive, onMounted,onBeforeUnmount, getCurrentInstance } from "vue";
  import { useRoute, useRouter } from "vue-router";
  export default {
    setup() {
      let { proxy } = getCurrentInstance();
      const router = useRouter()
      const control = ref(null);
      onMounted(() => {
        initApp();
        window.onresize = function () {
          //自适应大小, 不用的话不会自适应大小。
          initApp();
        };
      });
      const initApp = () => {
        proxy.$app = new THING.App({
          container: "sceneBox",
          url: "https://img.zlink.group/hfsource/public/thing/scene/",
          loaderResourceUrl: "https://img.zlink.group/hfsource/public/thing/model",
        });
  
        // 加载样式模板插件
        control.value = new THING.EffectThemeControl();
        proxy.$app.addControl(control.value, "效果模板控制器");
  
        // 获取样式模板插件
        proxy.$app.getControl("效果模板控制器");
  
        // 注册离线模板
        control.value.registerTheme(
          "default_parkbusiness",
          window.data.data,
          "https://img.zlink.group/hfsource/public/thing/theme/"
        );
  
        proxy.$app.level.options.autoChangeBackground = false;
  
        proxy.$app.on("load", (ev) => {
          proxy.$app.level.change(ev.campus);
          const campus = proxy.$app.query(".Campus")[0];
          proxy.$app.camera.xAngleLimitRange = [0, 90];
  
          // 应用效果模板
          campus.applyTheme("default_parkbusiness"); // 更改模型默认材质
          control.value.applyEffectTheme("default_parkbusiness", campus); // 生成特效地面，粒子等
          control.value.applyThemeEnvironment("default_parkbusiness", campus); // 应用背景，灯光，后期等全局
  
          // 在下面写业务代码，已有id的设备列表的对应关系
  
          // 汽车充电桩：chongdianzhuang
          // 自行车充电桩：chepeng
          // 光伏：guangfu
          // 路灯：ludeng
          // 配电房：peidianfang
          // 立库：liku
          // 宿舍：sushe
  
          // 以路灯为例，获取对应的物体并飞过去
          const obj = proxy.$app.query("#ludeng")[0];
          // proxy.$app.camera.flyTo({
          //     object: obj,
          //     time: 1000,
          // });
          // 同时创建顶牌;
          proxy.$app.create({
            type: "Marker",
            name: "marker02",
            url: "./src/assets/img/pointer.png",
            parent: obj,
            offset: [0, -5, 0],
          });
          // 设置勾边颜色
          obj.style.outlineColor = "#0000ff";
        });
      };
      onBeforeUnmount(() => {
        control.value = null;
        proxy.$app = null;
        router.go("0");
      })
    },
    // data() {
    //   return {
    //     control: null,
    //   };
    // },
    // mounted() {
    //   var that = this;
    //   this.initApp();
    //   window.addEventListener("resize", function () {
    //     that.initApp();
    //   });
    // },
    // beforeDestroy() {
    //   this.$app = null;
    //   this.control = null;
    //   window.location.reload();
    // },
    // methods: {
    //   initApp() {
    //     this.$app = new THING.App({
    //       container: "sceneBox",
    //       url: "./thing/scene/",
    //       loaderResourceUrl: "./thing/model",
    //     });
  
    //     // 加载样式模板插件
    //     this.control = new THING.EffectThemeControl();
    //     this.$app.addControl(this.control, "效果模板控制器");
  
    //     // 获取样式模板插件
    //     this.$app.getControl("效果模板控制器");
  
    //     // 注册离线模板
    //     this.control.registerTheme(
    //       "default_parkbusiness",
    //       window.data.data,
    //       "./thing/theme/"
    //     );
  
    //     this.$app.level.options.autoChangeBackground = false;
  
    //     this.$app.on("load", (ev) => {
    //       this.$app.level.change(ev.campus);
    //       const campus = this.$app.query(".Campus")[0];
    //       this.$app.camera.xAngleLimitRange = [0, 90];
  
    //       // 应用效果模板
    //       campus.applyTheme("default_parkbusiness"); // 更改模型默认材质
    //       this.control.applyEffectTheme("default_parkbusiness", campus); // 生成特效地面，粒子等
    //       this.control.applyThemeEnvironment("default_parkbusiness", campus); // 应用背景，灯光，后期等全局
  
    //       // 在下面写业务代码，已有id的设备列表的对应关系
  
    //       // 汽车充电桩：chongdianzhuang
    //       // 自行车充电桩：chepeng
    //       // 光伏：guangfu
    //       // 路灯：ludeng
    //       // 配电房：peidianfang
    //       // 立库：liku
    //       // 宿舍：sushe
  
    //       // 以路灯为例，获取对应的物体并飞过去
    //       const obj = this.$app.query("#ludeng")[0];
    //       // this.$app.camera.flyTo({
    //       //     object: obj,
    //       //     time: 1000,
    //       // });
    //       // 同时创建顶牌;
    //       this.$app.create({
    //         type: "Marker",
    //         name: "marker02",
    //         url: "./src/assets/img/pointer.png",
    //         parent: obj,
    //         offset: [0, -5, 0],
    //       });
    //       // 设置勾边颜色
    //       obj.style.outlineColor = "#0000ff";
    //     });
    //   },
    // },
  };
  </script>
  